<template>
    <div class="result-wrap">
      <div>
        <img class="res-img" :src="datas.titile.img"/>
        <p class="result">{{ datas.titile.evaluate }}</p>
      </div>
      <div class="coupon" @click="checkintroduce">
        <p style="bottom: 50%"><span>方向一佰</span> 驾校</p>
        <p><span>{{ newprice + '元'}}</span> 学车抵用券</p>
        <p style="bottom: 15%;font-size: 13px">(以上品牌驾校均通用)</p>
      </div>
      <div>
        <p class="noti">答对几题即可获得几百元的抵用券！</p>
        <p class="noti">如果答对5道题，即升级为500元的抵用券哦!</p>
      </div>
      <a class="btn-again" v-if="( datas.again_num > 0 )" @click="goques"></a>
      <a class="btn-none" v-else></a>
      <a href="#" class="btn-share" @click="share"></a>
      <p class="shuoming" @click="checkintroduce">查看"抵用券"及"领月饼"说明</p>
      <cover v-show="cover" v-on:getimg="display" :type="this.type"></cover>
    </div>
</template>
<script type="text/ecmascript-6">
  import cover from 'components/cover/cover';
  import {wxconfig} from 'common/js/wxconfig';
  export default {
    props: ['datas'],
    data() {
      return {
        cover: '',
        type: '',
        shareprice: 0
      };
    },
    computed: {
      newprice: function () {
        return this.datas.deduct_prict > this.shareprice ? this.datas.deduct_prict : this.shareprice;
      }
    },
    created() {
      wxconfig(this);
    },
    methods: {
      share() {
        this.cover = 'true';
        this.type = 'share';
      },
      checkintroduce() {
        this.cover = 'true';
        this.type = 'introduce';
      },
      display(msg) {
        this.cover = msg;
      },
      goques() {
        this.$emit('showques', 'true');
      }
    },
    components: {
      cover
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .wrap:after
    background none
  .result-wrap
    position absolute
    width 100%
    text-align center
    bottom 0
    color #2F499D
    display: flex
    min-height 100%
    flex-direction: column
    justify-content: space-around
    .res-img
      width 80%
      height auto
      margin-top 10px
    .result
      background none
      font-size 22px
      font-weight bold
      line-height 28px
      height auto
      text-align center
      width 90%
      margin-left 5%
    .coupon
      display inline-block
      position relative
      margin 10px 0
      width 90%
      left 5%
      padding-bottom 49.5%
      background: url(./coupon.png) 0% 0% / 100% no-repeat;
      p
        position absolute
        bottom: 30%;
        left: 0;
        width 63.4%
        font-size 1.2rem
        font-weight bold
        text-align center
        margin-left 6.2%
        span
          color #E1BE18
          font-weight bold
          font-size 1.2rem
    .noti
      height 20px
      line-height 20px
      font-size 15px
    .btn-again, .btn-share, .btn-none
      position relative
      display inline-block
      width 70%
      left 15%
      padding-bottom: 15.7%;
      margin-top 10px
    .btn-again
      background url("./again.png") no-repeat
      background-size 100% auto
    .btn-share
      background url("./mooncake.png") no-repeat
      background-size 100% auto
    .btn-none
      background url("./nochance.png") no-repeat
      background-size 100% auto
    .shuoming
      margin-top 10px
      font-size 15px
      height 40px
      text-decoration:underline
</style>
